<template>
    <view class="notification" :class="{ expanded: isExpanded && Object.keys(group).length>0 }">
        <!-- 头部固定区域 -->
        <view class="header" @click="toggleExpand">
            <view class="avatarcontainer" :class="{ blink: Object.keys(group).length>0 }">
               <text class="title">邻里服务</text>         
             <text class="arrow" :class="{ rotated: isExpanded }">▼</text>
			 </view>
            
          
        </view>

        <!-- 可展开内容 -->
        <view v-if="isExpanded" class="expand-content">
            <view v-if="isExpanded" class="group-list" @click="toGroup">
                <view class="group-item">
                    <text class="group-name">{{ group.groupName }}</text>
                    <text class="group-signature">{{ group.signature }}</text>
                </view>
                <text class="enter-arrow">→</text>
            </view>
            <view v-else class="empty-tip" @click="regOwn">
                <text>附近暂无服务群</text>
                <text class="tip-text">点击申请成为群主</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'groupTab',
    props: {
        group: {
            type: Object,
            default: () =>{}
        }
    },

    data() {
        return {
            isExpanded: true,
            avatarFallback: '/static/1.jpg',
			
        };
    },
	
	
    methods: {
        handleImageError(e) {
            console.error('头像加载失败:', e);
        },
        toggleExpand() {
          if(Object.keys(this.group).length>0){
                this.isExpanded = !this.isExpanded;
            }
        },
        regOwn() {
            uni.navigateTo({
                url: '/pages/regOwn/regOwn'
            });
        },
        toGroup() {
			
			uni.showToast({
				title:'开发中'
			})
            // const group = {
            //     targetId: this.group[0].groupId,
            //     targetName: this.group[0].groupName,
            //     targetType: '2'
            // };

            // this.$emit('totarget', group);
        }
    }
};
</script>

<style lang="scss" scoped>
.notification {
   display: flex;
   flex-direction: column;
    width: 300rpx;
	color: white;
    background-color: rgba(0, 0, 0, 0.3); /* 可根据实际情况修改颜色 */
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: all 0.3s ease;

    &.expanded {
        min-height: 180rpx;
    }
}

.header {
    display: flex;
    align-items: center;
    padding: 20rpx;

}

.avatarcontainer {
	width: 320rpx;
    height: 40rpx;
    margin-right: 20rpx;
    flex-shrink: 0;
    overflow: hidden;
	
    &.blink {
        animation: blink 1.2s ease-in-out infinite;
    }
}

.adminer {
    position: absolute;
    z-index: 2;
    right: -8rpx;
    bottom: -8rpx;
    background: #fff;
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.title {
    font-size: 32rpx;
    flex-grow: 1;
}

.arrow {
    font-size: 28rpx;
    transition: transform 0.3s;
    margin-left: 10rpx;

    &.rotated {
        transform: rotate(180deg);
    }
}

.expand-content {
    padding: 0 20rpx 20rpx;
}

.group-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-top: 1rpx solid #eee;
}

.group-item {
    flex: 1;
    overflow: hidden;
}

.group-name {
    display: block;
    font-size: 28rpx;
    margin-bottom: 8rpx;
    	/* #ifndef APP-PLUS-NVUE */
		white-space: nowrap;
	/* #endif */
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-signature {
    font-size: 24rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
</style>    